import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Checkbox, Alert, Icon, Form, Input, Button } from 'antd';
import Login from '../../components/Login';
import styles from './Login.less';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
const FormItem = Form.Item;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
  }

  // onLogin = () => {
  //   const { getFieldsValue, validateFields } =  this.props.form
  //   const data = {...getFieldsValue()}
  //   console.log('data',getFieldsValue())
  //   this.props.dispatch({
  //     type: 'login/login',
  //     payload:data
  //   })
  //   validateFields(errors => {
  //     if (errors) {
  //       return;
  //     }

  //   })

  // }

  onTabChange = (type) => {
    this.setState({ type });
  }

  handleSubmit = (err, values) => {
    const { type } = this.state;
    if (!err) {
      this.props.dispatch({
        type: 'login/login',
        payload: {
          ...values,
          type,
        },
      });
    }
  }

  changeAutoLogin = (e) => {
    this.setState({
      autoLogin: e.target.checked,
    });
  }

  renderMessage = (content) => {
    return (
      <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
    );
  }

  render() {
    const { login, submitting } = this.props;
    const { getFieldDecorator, getFieldsValue } = this.props.form
    const { type } = this.state;
    return (
      <div className={styles.main}>
        <Login
          defaultActiveKey={type}
          onTabChange={this.onTabChange}
          onSubmit={this.handleSubmit}>
          <Tab key="account" tab="账户密码登录">
            {
              login.status === 'error' &&
              login.type === 'account' &&
              !login.submitting &&
              this.renderMessage('账户或密码错误')
            }
            <UserName name="userAccount" placeholder="请输入用户名" />
            <Password name="password" placeholder="请输入密码" />
          </Tab>

          <Submit>登录</Submit>
        </Login>
      </div>
    );
  }
}

export default Form.create()(LoginPage)


